<template>
  <div class="shipin-box" v-infinite-scroll="load" :infinite-scroll-disabled="disabled" infinite-scroll-distance="50">
    <ul class="cates-list">
      <li class="cates-item">
        <span class="item-tit" href="">地区:</span>
      </li>
      <li class="cates-item" v-for="(it,index) in renderCate['area']" @click="changeActive('area',index)">
        <span :class="cssActiveObj.areaActive==index ? 'item-tit active-tit':'item-tit' " href="">{{ it }}</span>
      </li>
    </ul>
    <ul class="cates-list">
      <li class="cates-item">
        <span class="item-tit" href="">类型:</span>
      </li>
      <li class="cates-item" v-for="(it,index) in renderCate['type']" @click="changeActive('type',index)">
        <span :class="cssActiveObj.typeActive==index ? 'item-tit active-tit':'item-tit' " href="">{{ it }}</span>
      </li>
    </ul>
    <ul class="cates-list">
      <li class="cates-item">
        <span class="item-tit" href="">排序:</span>
      </li>
      <li class="cates-item" v-for="(it,index) in renderCate['order']" @click="changeActive('order',index)">
        <span :class="cssActiveObj.orderActive==index ? 'item-tit active-tit':'item-tit' " href="">{{ it }}</span>
      </li>
    </ul>
    <ul class="new-mv-list">
      <li class="new-mv-item" v-for="(item,index) in renderList" :key="index" @click="mvInfo(item.id)">
        <img class="new-mv-item-cover" :src="item.cover" alt="" srcset="">
        <p class="new-mv-item-txt">{{ item.name }} - {{ item.artistName }}</p>
      </li>
      <p v-if="loading">加载中...</p>
      <p v-if="noMore">没有更多了</p>
    </ul>
  </div>
</template>

<script>
import  {getCountMv} from '@/request/Api'
export default {
  name:'Shipin',
  created(){
    this.getCountMv(this.requestParams.area,this.requestParams.type,this.requestParams.order,this.requestParams.limit,this.requestParams.offset)
  },
  data(){
    return {
      /* 请求参数 */
      requestParams:{
        area:'全部',
        type:'全部',
        order:'上升最快',
        limit:30,
        offset:0
      },
      renderCate:{
        area:['全部','内地','港台','欧美','日本','韩国'],
        type:['全部','官方版','原生','现场版','网易出品'],
        order:['上升最快','最热','最新'],
      },
      cssActiveObj:{
        areaActive:0,
        typeActive:0,
        orderActive:0
      },
      loading:false,
      noMore:false,
    //  渲染的数据
      renderList:[],
      cur:1,
    }
  },
  computed:{
    disabled () {
      return this.loading || this.noMore
    }
  },
  methods:{
    //  获取响应的mv数据信息
    async getCountMv(area,type,order,limit,offset){
      const {data:res} = await getCountMv(area,type,order,limit,offset)
      console.log('当前获取到的数据',res)
      this.renderList = res.data
    },
    changeActive(type,index){
     switch (type){
       case 'area':
         this.cssActiveObj.areaActive = index
          this.requestParams.area = this.renderCate.area[index]
           this.requestParams.offset = 0
           this.cur = 0
             break;
       case 'type':
         this.cssActiveObj.typeActive = index
           this.requestParams.type = this.renderCate.type[index]
            this.requestParams.offset = 0
            this.cur = 0
             break;
       case 'order':
         this.cssActiveObj.orderActive = index
           this.requestParams.order = this.renderCate.order[index]
            this.requestParams.offset = 0
            this.cur = 0
             break;
     }
     this.getCountMv(this.requestParams.area,this.requestParams.type,this.requestParams.order,this.requestParams.limit,this.requestParams.offset)
    },
    mvInfo(mvid){
      this.$router.push({name:'MVINFO',params:{mvid}})
    },
    async load () {
      this.cur++
      this.requestParams.offset = this.cur * this.requestParams.limit
      this.loading = true
      const {data:res} = await getCountMv(this.requestParams.area,this.requestParams.type,this.requestParams.order,this.requestParams.limit,this.requestParams.offset)
      this.renderList = [...this.renderList,...res.data]
      this.loading = false
    }
  }
}
</script>

<style lang="less" scoped>
.cates-list {
  width: 100%;
  overflow: hidden;
  font-size: .7rem;
  .cates-item {
    float: left;
    padding: .4rem;
    .item-tit {
      cursor: pointer;
    }
    .active-tit {
      color: #fff;
      background: rgb(216, 13, 13);
      padding: 0px .43rem;
      border-radius: 10px;
    }
  }
}
.new-mv-list {
  width: 100%;
  overflow: hidden;
  .new-mv-item {
    padding: .3rem;
    width: 25%;
    height: 11rem;
    overflow: hidden;
    float: left;
    .new-mv-item-cover {
      border-radius: 5px;
      width: 100%;
      height: 8rem;
      object-fit: cover;
    }
    .new-mv-item-txt {
      margin-top: .4rem;
      width: 100%;
      max-height: 3rem;
      font-size: .7rem;
    }
  }
}
</style>